<template>
  <view class="custom-picker">
    <!-- 触发区域 -->
    <view class="picker-header" @click="showPicker">
      <slot name="trigger" :value="currentValue" :label="currentLabel">
       <view class="user-option">
         当前还未授权手机号，是否授权手机号？
       </view>
      </slot>
    </view>
    
    <!-- 遮罩层 -->
    <view class="picker-mask" v-if="isVisible" @click="handleMaskClick"></view>
    
    <!-- 选择器内容 -->
    <view class="picker-content" v-if="isVisible">
      <!-- 标题栏 -->
      <view class="picker-title">
        <text class="cancel-btn" @click="handleCancel">取消</text>
        <text class="confirm-btn" @click="handleConfirm">确定</text>
      </view>
      
      <!-- 选项列表 -->
      <scroll-view class="picker-options" scroll-y>
        <view 
          class="picker-option" 
          :class="{ 'active': option.value === currentValue }" 
          v-for="option in options" 
          :key="option.value" 
          @click="selectOption(option)"
        >
          <slot :option="option" :selected="option.value === currentValue">
            {{ option.label }}
          </slot>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'CustomPicker',
  props: {
    // 选项列表
    options: {
      type: Array,
      default: () => []
    },
    // 当前选中值(v-model绑定)
    modelValue: {
      type: [String, Number],
      default: ''
    },
    // 占位文本
    placeholder: {
      type: String,
      default: '请选择'
    },
    // 控制显示隐藏
    visible: {
      type: Boolean,
      default: false
    },
    // 点击遮罩是否关闭
    maskClosable: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      // 内部选中值
      innerValue: this.modelValue,
      // 内部可见状态
      innerVisible: this.visible
    }
  },
  computed: {
    // 当前选中值
    currentValue() {
      return this.modelValue !== undefined ? this.modelValue : this.innerValue;
    },
    // 当前选中标签
    currentLabel() {
      const selectedOption = this.options.find(option => option.value === this.currentValue);
      return selectedOption ? selectedOption.label : '';
    },
    // 当前可见状态
    isVisible() {
      return this.visible !== undefined ? this.visible : this.innerVisible;
    }
  },
  watch: {
    // 监听外部传入的value变化
    modelValue(newVal) {
      this.innerValue = newVal;
    },
    // 监听外部传入的visible变化
    visible(newVal) {
      this.innerVisible = newVal;
    }
  },
  methods: {
    // 显示选择器
    showPicker() {
      this.$emit('update:visible', true);
      this.innerVisible = true;
      this.$emit('open');
    },
    
    // 隐藏选择器
    hidePicker() {
      this.$emit('update:visible', false);
      this.innerVisible = false;
      this.$emit('close');
    },
    
    // 选择选项
    selectOption(option) {
      this.innerValue = option.value;
      this.$emit('update:modelValue', option.value);
      this.$emit('select', option);
    },
    
    // 点击遮罩层
    handleMaskClick() {
      if (this.maskClosable) {
        this.hidePicker();
      }
    },
    
    // 点击取消
    handleCancel() {
      this.hidePicker();
      this.$emit('cancel');
    },
    
    // 点击确定
    handleConfirm() {
      this.hidePicker();
      this.$emit('confirm', this.currentValue);
    }
  }
}
</script>

<style lang="scss">
// 保持原有样式不变...
.custom-picker{
	width: 100%;
	position: fixed;
	bottom: 0;
	height: 20%;
	border-top-right-radius: 15px;
	border-top-left-radius: 15px;
	background-color: white;
	box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1)
}
.user-option{
	padding: 30rpx;
}
</style>    